// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";
@text-min-width:300px;
body{
  z-index:0;
  background: @app-background-color;
}
.editor-background {
  &atom-workspace{
    z-index: 2;
  }
  atom-pane{
    background:transparent !important;
  }
  atom-text-editor{
    background: transparent !important;
  }
  atom-text-editor.editor{
    .lines{
      background:transparent !important;
    }
    .gutter{
      background:transparent !important;
    }
  }

}

.eb-modal-window{
  position:absolute;
  background: /*url('atom://editor-background/images/bg-noise.png'),*/@app-background-color;
  color: @text-color;
  border:1px solid @base-border-color;
  min-width: 300px;
  left:0px;
  top:0px;
  opacity:1;
  display:none;
  z-index:999;
  text-align:center;
  border-radius:3px;
  box-shadow: 0px 10px 40px rgba(0,0,0,0.45);

  #working{
    float:left;
  }
  .wrapper{
    position: relative;
  }
  .title{
    background:@tab-background-color-active;
    border-bottom:1px solid @base-border-color;
    padding:10px;
    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
  }
  .close{
    float: right;
    padding: 4px;
    margin: 0px 4px 0px 10px;
    line-height: 1.3;
  }
  .content{
    padding:10px;
    /*background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0) 40px);*/
  }
  .buttons{
    position:relative;
    bottom:0px;
    margin-top:13px;
    padding:10px;
    border-top:1px solid @base-border-color;
    text-align:right;
    background:@app-background-color;
  }
  input,textarea{
    background:@tab-background-color-active;
    border:1px solid @base-border-color;
    color:@text-color;
    padding:4px;
    border-radius:3px;
    margin:2px;
  }
  input[type="text"],input[type="number"]{
    box-shadow:inset 2px 2px 2px rgba(0,0,0,0.1);
  }
  input[type="text"]{
    min-width:@text-min-width;
  }
  input[type="color"]{
    height: 40px;
    vertical-align: middle;
  }
  select{
    background: @app-background-color;
    border:1px solid @base-border-color;
    color:@text-color;
    border-radius:3px;
    padding:4px;
  }
  .group{
    margin:6px 0px;
  }
  .group-addon:last-child{
    margin-left:0px;
    border-left:none;
    margin-top:0;
    border-radius:0px 3px 3px 0px;
  }
  .slider {
    width: 160px;
    display:inline-block;
    vertical-align: middle;
  }
  .slider > .dragger{
    border: 1px solid @base-border-color;
    width: 16px;
    height: 16px;
    border-radius:3px;
    background: linear-gradient(
      rgba(255,255,255,0.1),
      rgba(255,255,255,0) 4px,
      rgba(255,255,255,0) 10px,
      rgba(0,0,0,0.33)
      )
    ,@tab-background-color-active;
  }
  .slider > .track{
    box-shadow:inset 2px 2px 2px rgba(0,0,0,0.2);
    height:10px;
    border-radius:3px;
    border:1px solid @base-border-color;
    &:before{
      content:"";
      width: 100%;
      height:100%;
      position: absolute;
      background:repeating-linear-gradient(to right,@app-background-color 0px,@app-background-color 1px, @base-border-color 2px,@base-border-color 3px);
      background-size:2px;
      opacity: 0.3;
    }


  }

  .file-text{
    margin-right:0px;
    border-right:none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    vertical-align: middle;
    min-width:@text-min-width;
  }
  .file-btn{
    margin-left:0px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    line-height:inherit;
    padding:4px 10px;
  }
  label{
    min-width:150px;
    border-bottom:1px dotted @text-color-subtle;
  }
  .config-content {
    background: transparent;
    position: relative;
    clear: both;
  }

  .tab-content{
    text-align:left;
    display:none;
    padding:10px;
    background: @app-background-color;
    &.active{
      display:block;
      border:1px solid @base-border-color;
    }
  }

  .tab{
    display:block;
    float:left;
    padding:4px 10px;
    cursor:pointer;
    border: 1px solid @base-border-color;
    border-right:none;
    border-bottom:none;
    background:@tab-background-color;

    &:last-child{
      border-right: 1px solid @base-border-color;
    }

    &.active{
      font-weight:bold;
      position:relative;
      background:linear-gradient(@tab-background-color-active,@app-background-color 50%);

      &:after{
        content:'';
        position:absolute;
        width:100%;
        height:2px;
        background:@app-background-color;
        z-index:1;
        left:0;
        bottom:-2px;
      }
      &:before{
        content:'';
        position:absolute;
        width:100%;
        height:2px;
        background:red;
        z-index:1;
        left:0;
        top:-2px;
      }
    }
  }

  .config-tabs{
    overflow:visible;
    border-collapse: collapse;
  }


  /*!
 * Bootstrap Colorpicker
 * http://mjolnic.github.io/bootstrap-colorpicker/
 *
 * Originally written by (c) 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 *
 */
.picker-wrapper{
  position:relative;
  display:inline-block;
}
.colorpicker-saturation {
  float: left;
  width: 100px;
  height: 100px;
  cursor: crosshair;
  background-image: url("atom://editor-background/images/saturation.png");
}

.colorpicker-saturation i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 5px;
  height: 5px;
  margin: -4px 0 0 -4px;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.colorpicker-saturation i b {
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.colorpicker-hue,
.colorpicker-alpha {
  float: left;
  width: 15px;
  height: 100px;
  margin-bottom: 4px;
  margin-left: 4px;
  cursor: row-resize;
}

.colorpicker-hue i,
.colorpicker-alpha i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: -1px;
  background: #000;
  border-top: 1px solid #fff;
}

.colorpicker-hue {
  background-image: url("atom://editor-background/images/hue.png");
}

.colorpicker-alpha {
  display: none;
  background-image: url("atom://editor-background/images/alpha.png");
}

.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {
  background-size: contain;
}

.colorpicker {
  top: 100%;
  right:0;
  z-index: 9999999999;
  min-width: 130px;
  padding: 4px;
  background:@input-background-color;
  position:absolute;
  margin-top: 1px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  *zoom: 1;
}

.colorpicker:before,
.colorpicker:after {
  display: table;
  line-height: 0;
  content: "";
}

.colorpicker:after {
  clear: both;
}

.colorpicker:before {
  position: absolute;
  top: -7px;
  left: 6px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.colorpicker:after {
  position: absolute;
  top: -6px;
  left: 7px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid @input-background-color;
  border-left: 6px solid transparent;
  content: '';
}

.colorpicker div {
  position: relative;
}

.colorpicker.colorpicker-with-alpha {
  min-width: 140px;
}

.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
  display: block;
}

.colorpicker-color {
  height: 10px;
  margin-top: 5px;
  clear: both;
  background-image: url("atom://editor-background/images/alpha.png");
  background-position: 0 100%;
}

.colorpicker-color div {
  height: 10px;
}

.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  cursor: pointer;
}

.colorpicker.colorpicker-inline {
  position: relative;
  z-index: auto;
  display: inline-block;
  float: none;
}

.colorpicker.colorpicker-horizontal {
  width: 110px;
  height: auto;
  min-width: 110px;
}

.colorpicker.colorpicker-horizontal .colorpicker-saturation {
  margin-bottom: 4px;
}

.colorpicker.colorpicker-horizontal .colorpicker-color {
  width: 100px;
}

.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
  float: left;
  width: 100px;
  height: 15px;
  margin-bottom: 4px;
  margin-left: 0;
  cursor: col-resize;
}

.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 15px;
  margin-top: 0;
  background: #ffffff;
  border: none;
}

.colorpicker.colorpicker-hidden {
  display: none;
}

.colorpicker.colorpicker-visible {
  display: block;
}

.colorpicker-inline.colorpicker-visible {
  display: inline-block;
}

.colorpicker-right:before {
  right: 6px;
  left: auto;
}

.colorpicker-right:after {
  right: 7px;
  left: auto;
}


}


#editor-background-config{


}

atom-pane-container atom-pane .item-views{
  background:transparent !important;
  background-color:transparent !important;
}

atom-workspace.editor-background{
    background:transparent !important;
}
